import { View, Button, Block } from "@tarojs/components";
// import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
import { navigateTo } from "@tarojs/taro";
import { useRef, useState } from "react";
import { SearchInput, ItemView } from "../../components/index";
import "./search.scss";
import { fetchSearch } from "../../utils/api";

const SearchPage = () => {
  const [value, setValue] = useState<string>("");
  const [list, setList] = useState<any[]>([]);
  const pageOpt = useRef({ page: 1, size: 5 });

  const fetchSearchChange = async (val: string) => {
    const response = await fetchSearch({ keyword: val, ...pageOpt.current });
    // const response = await fetch("http://localhost:9999/list", "GET", {
    //   q: val,
    //   _page: 1,
    //   _limit: 5,
    // });
    console.log("response:", response);
    setList(response);
  };

  const handleRouterDetail = (item) => {
    navigateTo({ url: `/pages/detail/detail?id=${item.id}` });
  };

  return (
    <View>
      {/* <View style={{ marginTop: "30px" }}>
        <AtNavBar
          onClickRgIconSt={() => {}}
          onClickRgIconNd={() => {}}
          onClickLeftIcon={() => {}}
          color="#000"
          title="NavBar 导航栏示例"
          leftText="返回"
          rightFirstIconType="bullet-list"
          rightSecondIconType="user"
        />
      </View> */}

      <View className="search-input-wrapper">
        <SearchInput
          name="name"
          value={value}
          onChange={(val) => {
            console.log("val:", val);
            // 受控逻辑
            setValue(val);
            // 调用搜索接口
            fetchSearchChange(val);
          }}
        ></SearchInput>
      </View>

      {/* {list.map((item) => {
        return (
          <ItemView
            key={item.id}
            item={item}
            detailClick={() => handleRouterDetail(item)}
            src={item.productPic}
            text={item.productName}
          ></ItemView>
        );
      })} */}
    </View>
  );
};

export default SearchPage;
